
function iPresentation(anime, id)
{
    var data = [];
    _loadYAML(document.getElementById(id));

    // Start from page 0
    var cur = 0;
    var slide = "<div id='{P}' class='slide'>{C}</div>";

    var width, height, mainDiv, hiddenDiv, pages;
    _initLayout();
    window.onresize = _changeLayout;
    window.onorientationchange = _changeLayout;

    function _loadYAML(source)
    {
        var arr = source.innerHTML.split('\n');
        var last = {}; // dummy
        var index = 0;
        for (var i in arr) {
            var line = arr[i];
            var result;
            if (result = line.match(/^===(.*)/)) {
                last = { takahashi: result[1] }; 
                data.push(last);
            } else if (result = line.match(/^==(.*)/)) {
                last = { title: result[1] }; 
                data.push(last);
                index = 1;
            } else if (result = line.match(/^\s*\*(.*)/)) {
                last[index++] = result[1];
            } else if (result = line.match(/^\s*img\*(.*)/)) {
                last.imgh = result[1];
            }
        }
        document.body.removeChild(source);
    }

    function _initLayout() {
        width = iBrowse.getWindowWidth();
        height = iBrowse.getWindowHeight();
        var style = "width:{W}px;height:{H}px";
        style = style.replace(/{W}/, width).replace(/{H}/, height);
        var smallfont = Math.min(width/22, height/15);
        var html = "<div id='main' class='background' style='font-size:{SF}px;{ST}'>"
             + "</div>"
             + "<div id='hidden'></div>";
        html = html.replace(/{SF}/, smallfont).replace(/{ST}/, style);
        document.body.innerHTML = html;
        mainDiv = document.getElementById('main');
        hiddenDiv = document.getElementById('hidden');
        pages = [];
        _goto(cur);
        scrollTo(0,1);
    }

    function _changeLayout() {
        document.body.removeChild(mainDiv);
        document.body.removeChild(hiddenDiv);
        _initLayout();
    }

    function _click()
    {
        anime.addSequence( [
            {element:pages[cur], effect:'fadeout', duration:200},
            {element:pages[cur], x:width}
        ]);
        cur++;
        if (cur < data.length) {
            _goto();
        } else {
            cur = 0;
            setTimeout(_goto, 2000);
        }
    }

    function _goto() {
        var index = cur;
        _prepare(index);
        var seq = [];
        var p = pages[index];
        var d = data[index];
        var dur = d.duration || 500;
        var effect = d.effect || 'easeinout';
        if (effect == 'fadein') {
            seq.push({ element:p, effect:'fadeout', x:0, y:0 });
            seq.push({ element:p, effect:'fadein', duration:dur });
        } else {
            seq.push({ element:p, effect:'fadein', x:width, y:0 });
            seq.push({ element:p, effect:effect, x:0, duration:dur });
        }
        if (index+1 < data.length) {
            seq.push({ onComplete: function() { _prepare(index+1); }});
        }
        anime.addSequence(seq);
    }
 
    function _prepare(index) {
        if (pages[index]) return;
        var info = data[index];
        var contents;
        if (info.takahashi) {
            contents = "<p class='takahashi'>{T}</p>";
            html = slide.replace(/{P}/,index).replace(/{C}/,contents);
            html = html.replace(/{T}/, info.takahashi);
            html = html.replace(/\*{(.*)}\*/g, function(a,b) {return "<span class='monta'>{S}</span>{S}".replace(/{S}/g,b);});
        } else if (info.title) {
            contents = "<p class='title'>{T}</p><div>{I}</div>";
            html = slide.replace(/{P}/,index).replace(/{C}/,contents);
            var items;
            if (info[1]) {
                items = "<UL>";
                for (var i=1; info[i]; i++) {
                    var t = info[i].replace(/\*{(.*)}\*/g, function(a,b) {return "<span class='monta'>{S}</span>{S}".replace(/{S}/g,b);});
                    items += "<LI>" + t + "</LI>";
                }
                items += "<UL>";
            } if (info.imgh) {
                items = "<img class='imgh' src='{URL}' />".replace(/{URL}/, info.imgh);
            }
            html = html.replace(/{T}/, info.title).replace(/{I}/, items);
        }
        hiddenDiv.innerHTML = html;
        var page = document.getElementById(index);
        hiddenDiv.removeChild(page);
        mainDiv.appendChild(page);
        page.style.left = width + "px";
        page.onclick = _click;
        var montas = _getElementsByClassName("monta", "span");
        if (montas) {
            for (var i in montas) {
                var monta = montas[i];
                if (!monta.x_done) {
                    monta.x_done = true;
                    // monta.style.left = (monta.offsetLeft-2) + "px";
                    monta.onclick = _reveilMonta;
                }
            }
        }
        pages[index] = page;
    }
 
    function _reveilMonta(e) { 
        if (!e) e = window.event;
        _stopPropagation(e);
        anime.addSequence([
            { element:this, x:this.offsetLeft+100, y:this.offsetTop-60,
                duration: 300},
            { element:this, x:this.offsetLeft+200, y:this.offsetTop-120,
                effect:'fadeout', duration: 300 }
        ]);
    }

    function _getElementsByClassName(clssName, tag) {
        if (!tag) tag="*";
        var elements = document.getElementsByTagName(tag);
        var ret = [];
        for(var i=0; i<elements.length; i++){
            var element = elements[i];
            if(element.className == clssName){
                ret.push(element);
            }
        }
        return ret;
    }

    function _stopPropagation(ev) {
        if (ev.stopPropagation) ev.stopPropagation();
        else ev.cancelBubble = true;
     }
}
